<script lang="ts">
	import { type NodeProps } from '@xyflow/svelte';
	import NodeWrap from '../base/NodeWrap.svelte';
	import { LineSquiggle, PenLine } from 'lucide-svelte';
	import { NodeInfo } from '$lib/api/proto/roadmap_data_api';
	import { roadmapStore } from '../../store.svelte';
	import { Any } from '$lib/api/proto/google/protobuf/any';
	import { RelateRoadmapData } from '$lib/api/proto/roadmap_data_type_api';

	const props: NodeProps = $props();

	const nodeContent = $derived(
		Any.unpack((props.data as unknown as NodeInfo).content!, RelateRoadmapData)
	);
</script>

<NodeWrap nodeProps={props} nodeName="相关路线图">
	{#snippet nodeIcon()}
		<LineSquiggle />
	{/snippet}
	{#snippet editIcon()}
		<button
			type="button"
			title="修改"
			class="btn btn-ghost btn-sm z-50"
			onclick={() => {
				roadmapStore.editNode = props.data as unknown as NodeInfo;
				roadmapStore.editNodeType = 'RelateRoadmapData';
			}}
		>
			<PenLine size={14} />
		</button>
	{/snippet}
	<div class="flex justify-center pt-[20px]">
		<button
			data-sveltekit-reload
			type="button"
			class="btn btn-accent"
			onclick={() => (window.location.href = `/app/roadmap/map?roadmapId=${nodeContent.roadmapId}`)}
			>{nodeContent.roadmapName}</button
		>
	</div>
</NodeWrap>
